<template>
	<view class="financial_bills">
		<u-cell-group>
			<u-cell-item
				:arrow="false"
				:title-style="{ fontWeight: 500, color: '#000' }"
				:title="$t('locales.financialBill')"
			></u-cell-item>
		</u-cell-group>
		<view class="wallet_box">
			<view class="wallet">
				<view class="title">{{$t("locales.myWallet")}}</view>
				<view class="price">500,000.00</view>
				<view class="op">{{$t("locales.managingWallets")}}</view>
			</view>
			<view class="cars">
				<view class="block"></view>
				<view class="title">{{$t("locales.bankCard")}}</view>
				<view class="state">{{$t('locales.tiedCard')}}</view>
				<view class="del">{{$t('locales.viewDetails')}}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	}
}
</script>

<style lang="scss">
.financial_bills {
	background-color: #fff;
	overflow: hidden;
	.u-cell {
		padding-top: 15rpx !important;
		padding-bottom: 15rpx !important;
	}
	.wallet_box {
		margin: 20rpx;
		display: flex;
		.wallet {
			width: 450rpx;
			height: 250rpx;
			background-color: #efbd4c;
			border-radius: 12rpx;
			color: #fff;
			padding: 35rpx;
			box-sizing: border-box;
			.title {
				font-size: 28rpx;
			}
			.price {
				font-size: 48rpx;
				font-weight: bold;
				margin: 10rpx 0 30rpx 0;
			}
			.op {
				font-size: 22rpx;
			}
		}
		.cars {
			margin-left: 15rpx;
			flex: 1;
			height: 250rpx;
			box-shadow: 0px 1px 3px 0px #dfdbf0;
			border-radius: 12rpx;
			overflow: hidden;
			color: #efbd4c;
			.block {
				background-color: #efbd4c;
				height: 12rpx;
				width: 100%;
			}
			.title {
				margin: 20rpx;
			}
			.state {
				text-align: center;
				color: #222;
				font-weight: bold;
			}
			.del {
				margin: 40rpx;
				text-align: center;
			}
		}
	}
}
</style>
